<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Vue demo 17 嵌套路由练习</title>
    <style>
        .router-link-active {
            color: chartreuse;
            font-size: 24px;
        }
    </style>
</head>
<body>
<div id="box">
    <p>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
    </p>
    <router-view></router-view>
</div>
<!-- 模板抽离出来 -->
<template id="login">
    <div>
        <h1>登录页面</h1>
        <router-link to="/login/email">邮箱登录</router-link>
        <router-link to="/login/phone">手机登录</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="emailLogin">
    <div>
        <h3>邮箱登录</h3>
        <div>邮箱：<input type="email" placeholder="请输入邮箱账号">
            <button>
                邮箱登录
            </button>
        </div>
    </div>
</template>
<template id="phoneLogin">
    <div>
        <h3>手机登录</h3>
        <div>手机：<input type="tel" placeholder="请输入手机号码">
            <button>
                手机登录
            </button>
        </div>
    </div>
</template>
<template id="register">
    <div>
        <h1>注册页面</h1>
        <router-link to="/register/email">邮箱注册</router-link>
        <router-link to="/register/phone">手机注册</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="emailRegister">
    <div>
        <h3>邮箱注册</h3>
        <div>邮箱：<input type="email" placeholder="请输入邮箱账号">
            <button>
                邮箱注册
            </button>
        </div>
    </div>
</template>
<template id="phoneRegister">
    <div>
        <h3>手机注册</h3>
        <div>手机：<input type="tel" placeholder="请输入手机号码">
            <button>
                手机注册
            </button>
        </div>
    </div>
</template>
</body>
<script>
    // 1.定义（路由）组件
    const Login = {template: "#login"};
    const EmailLogin = {template: "#emailLogin"};
    const PhoneLogin = {template: "#phoneLogin"};
    const Register = {template: "#register"};
    const EmailRegister = {template: "#emailRegister"};
    const PhoneRegister = {template: "#phoneRegister"};
    // 2.定义路由（path, compontent）数组
    const routes = [
        {path: '/', redirect: '/login'},
        // {path: '/', component: Login},
        {
            path: '/login', component: Login,
            children: [
                {path: '/login/email', component: EmailLogin},
                {path: '/login/phone', component: PhoneLogin},
            ]
        },
        {
            path: '/register', component: Register,
            children: [
                {path: '/register/email', component: EmailRegister},
                {path: '/register/phone', component: PhoneRegister},
            ],
        },
    ];
    // 3.创建router实例，然后传‘routes’配置
    const router = new VueRouter({
        routes,
    });
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由,
    // 从而让整个应用都有路由功能
    let vm = new Vue({
        el: '#box',
        data: {},
        router,
    });
</script>
</html>